<!--
 * @Description: 
 * @Author: 张文韬
 * @Date: 2024-06-24 15:29:13
 * @LastEditTime: 2024-07-13 17:34:55
 * @LastEditors: 张文韬
 * @Reference: 
-->
<template>
  <section class="text-center">
    <!-- <el-form class="w-750px">
      <el-form-item label="企业名称: ">
        <el-input class="w-60% mr-20px" v-model="companyInfo.title" placeholder="请选择企业名称" clearable />
        <el-button type="primary" @click="getData">查询</el-button>
      </el-form-item>
    </el-form> -->
    <el-radio-group v-model="companyInfo.userId" @change="handleCompanyChange">
      <e-table
        class="w-750px"
        :data="tableData"
        :columns="columns"
        :loading="loading"
        :border="false">
        <template #select="{ scope }">
          <el-radio :value="scope.row.userId" size="large" />
        </template>
        <template #certificateType="{ scope }">
          <dict-tag :options="certificate_type_tuan" :value="`${scope.row.certificateType}`"></dict-tag>
        </template>
      </e-table>
    </el-radio-group>
  </section>
</template>

<script setup>

import { columns } from './config';
import { getHistoryCompany } from '@/api/insurance';
import ETable from '@/components/e-table';
import { useDict } from '/@/hooks/dict';

const props = defineProps({
  loading: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object,
    default: () => {}
  },
})

const companyInfo = ref({})
const tableData = ref([])
const { certificate_type_tuan } = useDict('certificate_type', 'certificate_type_tuan');

const getData = async() => {
  const { data } = await getHistoryCompany()
  console.log(123, data);
  
  tableData.value = data
}

const handleCompanyChange = (val) => {

  companyInfo.value = tableData.value.find(o =>  o.userId == val)
}

const getCompanyData = () => unref(companyInfo)

defineExpose({
  getCompanyData
})

watch(() => props.data, (val) => {
  companyInfo.value = val
})

onMounted(async() => {
  console.log('onMounted');
  getData()
})

</script>